import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js'

const scene = new THREE.Scene();

// shape可以用来绘制外轮廓，也可以用来绘制内轮廓，ShapeGeometry会使用三角形自动填充shape内轮廓和外轮廓中间的中部。
// 通用材质
const mat = new THREE.MeshBasicMaterial({
  color: 0x0000ff,
  wireframe: true
});
// 先来绘制一个纯粹的胶囊轮廓
const shape = new THREE.Shape();
shape.absarc(-50, 0, 50, Math.PI / 2, Math.PI * 1.5);
shape.lineTo(50, -50);
shape.absarc(50, 0, 50, 1.5 * Math.PI, Math.PI * .5);
const shapeGeo = new THREE.ShapeGeometry(shape);
const meshShape = new THREE.Mesh(shapeGeo, mat);
scene.add(meshShape);

// 绘制一个圆形轮廓内，嵌套三个圆形轮廓
const cShapeOuter = new THREE.Shape();
cShapeOuter.arc(0, 200, 100, 0, 2 * Math.PI);
const cShapeInner1 = new THREE.Shape();
cShapeInner1.arc(-75, 200, 10, 0, 2 * Math.PI);
const cShapeInner2 = new THREE.Shape();
cShapeInner2.arc(75, 200, 10, 0, 2 * Math.PI);
const cShapeInner3 = new THREE.Shape();
cShapeInner3.arc(0, 200, 50, 0, 2 * Math.PI);
cShapeOuter.holes.push(cShapeInner1, cShapeInner2, cShapeInner3);
const cShapeOuterGeo = new THREE.ShapeGeometry(cShapeOuter);
const cShapeMat = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  wireframe: true
})
const meshCShapeOuter = new THREE.Mesh(cShapeOuterGeo, cShapeMat);
scene.add(meshCShapeOuter);

// 多个轮廓可以同时绘制，只需在 ShapeGeometry 初始化时给入轮廓数组即可
const cShape1 = new THREE.Shape();
cShape1.arc(0, -150, 50, 0, 2 * Math.PI);
const cShape2 = new THREE.Shape();
cShape2.arc(-100, -200, 50, 0, Math.PI * 2);
const cShape3 = new THREE.Shape();
cShape3.arc(100, -200, 50, 0, Math.PI * 2);
const cShapeGeo = new THREE.ShapeGeometry([cShape1, cShape2, cShape3], 30);
const meshCShape = new THREE.Mesh(cShapeGeo, cShapeMat);
scene.add(meshCShape);

const k = innerWidth / innerHeight,
      s = 100,
      camera = new THREE.PerspectiveCamera(s, k, 1, 1000);
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);

(function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
})();